<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="80px">
            <!-- 下拉框 -->
            <el-form-item label="选择类型">
                <el-select v-model="form.typeId" placeholder="请选择" @change="handleTypeChange">
                    <el-option
                        v-for="item in typeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 单选框 -->
            <el-form-item label="单选框">
                <el-radio-group v-model="form.uidType">
                    <el-radio :label="1" :disabled="isNewUserType">所有用户</el-radio>
                    <el-radio :label="0" :disabled="!isNewUserType">新用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 日期选项框 -->
            <el-form-item label="开始日期">
                <el-date-picker
                    v-model="form.startDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                    v-model="form.endDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            
            <!-- 满减规则部分，只在选择满减红包时显示 -->
            <template v-if="isDiscountType">
                <el-form-item
                    v-for="(rule, index) in form.rules"
                    :key="index"
                    label="规则"
                >
                    <el-col :span="10">
                        <el-form-item :prop="'rules.' + index + '.full'" :rules="{ required: true, message: '请输入满额', trigger: 'blur' }">
                            <el-input v-model="rule.full" placeholder="满"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="text-align: center;"></el-col>
                    <el-col :span="10">
                        <el-form-item :prop="'rules.' + index + '.discount'" :rules="{ required: true, message: '请输入减额', trigger: 'blur' }">
                            <el-input v-model="rule.discount" placeholder="减"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeRule(index)"></el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addRule">新增满减规则</el-button>
                </el-form-item>
            </template>
            
            <!-- 普通满额规则，在其他类型时显示 -->
            <el-form-item v-else label="无门槛" prop="singleFull" :rules="{ required: true, message: '请输入数字', trigger: 'blur' }">
                <el-input v-model="form.singleFull" placeholder="请输入数字"></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="success" @click="submitRules">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { insertActivity, getTypeList } from '@/api/activity';

export default {
    data() {
        return {
            form: {
                typeId: '',
                uidType: 1,  // 默认选择所有用户
                startDate: '',
                endDate: '',
                rules: [{ full: '', discount: '' }],
                singleFull: '' // 用于临时存储单条满额数据
            },
            typeList: [],
            isDiscountType: false, // 是否显示满减规则
            isNewUserType: false   // 是否为新人立减红包类型
        };
    },
    methods: {
        getTypeList0() {
            getTypeList().then((res) => {
                this.typeList = res.data;
            });
        },
        // 类型变化时触发
        handleTypeChange(typeId) {
            // 这里假设满减红包的typeId是1，新人立减红包的typeId是2
            this.isDiscountType = typeId === 1; // 1是满减红包的类型ID
            this.isNewUserType = typeId === 2;  // 2是新人立减红包的类型ID
            
            // 如果是新人立减红包，强制设置为新用户
            if (this.isNewUserType) {
                this.form.uidType = 0;
            } else {
                // 其他类型强制设置为所有用户
                this.form.uidType = 1;
            }
            
            // 切换类型时重置规则数据
            if (this.isDiscountType) {
                this.form.rules = [{ full: '', discount: '' }];
            } else {
                this.form.singleFull = '';
            }
        },
        addRule() {
            this.form.rules.push({ full: '', discount: '' });
        },
        removeRule(index) {
            if (this.form.rules.length > 1) {
                this.form.rules.splice(index, 1);
            } else {
                this.$message.warning('至少需要保留一条规则');
            }
        },
        submitRules() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let submitData = {
                        typeId: this.form.typeId,
                        uidType: this.form.uidType,
                        startDate: this.form.startDate,
                        endDate: this.form.endDate
                    };
                    
                    // 统一使用rules字段
                    if (this.isDiscountType) {
                        // 处理满减规则
                        submitData.rules = this.form.rules.map(rule => {
                            return {
                                full: rule.full,
                                reduce: rule.discount
                            };
                        });
                    } else {
                        // 单条满额也转换为rules格式
                        submitData.rules = [{
                            full: this.form.singleFull,
                            reduce: 0 // 单条满额时减额为0
                        }];
                    }
                    
                    // 转换为JSON字符串
                    submitData.rules = JSON.stringify(submitData.rules);
                    
                    insertActivity(submitData).then(response => {
                        this.$message.success('提交成功');
                    }).catch(error => {
                        this.$message.error('提交失败');
                    });
                } else {
                    this.$message.error('请填写完整的表单信息');
                }
            });
        }
    },
    mounted() {
        this.getTypeList0();
    }
};
</script>

<style scoped>
</style>